<template>
  <div class="giftcard">
    <!-- 首页、礼品卡 -->
    <van-nav-bar title="粥铺有礼" left-arrow @click-left="onClickLeft" />
    <mt-navbar v-model="navactive">
      <mt-tab-item id="1">购买礼卡</mt-tab-item>
      <mt-tab-item id="2">我的礼品</mt-tab-item>
    </mt-navbar>

    <div
      class="giftcard-lb"
      v-infinite-scroll="loadMore"
      infinite-scroll-distance="30px"
      infinite-scroll-disabled="busy"
      :infinite-scroll-immediate-check="true"
    >
      <mt-swipe
        class="swipe"
        :style="{ height: h }"
        :speed="500"
        :showIndicators="true"
      >
        <mt-swipe-item>
          <img src="../assets/home/01.png" alt="" />
        </mt-swipe-item>
        <mt-swipe-item>
          <img src="../assets/home/02.png" alt="" />
        </mt-swipe-item>
        <mt-swipe-item>
          <img src="../assets/home/03.png" alt="" />
        </mt-swipe-item>
      </mt-swipe>
    </div>

    <!-- 内容面板 -->
    <mt-tab-container v-model="navactive">
      <mt-tab-container-item id="1">
        <van-grid :border="false" :column-num="2">
          <van-grid-item>
            <van-image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.52112.com%2F180624%2FEPS-180624_18%2FV7ZUgl4tpc_small.jpg&refer=http%3A%2F%2Fpic.52112.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629890947&t=aea18a711628a6bfbef526f3d66cf181" />
          </van-grid-item>
          <van-grid-item>
            <van-image src="https://img1.baidu.com/it/u=3537357907,2563663576&fm=26&fmt=auto&gp=0.jpg" />
          </van-grid-item>
        </van-grid>
      </mt-tab-container-item>

      <mt-tab-container-item id="2">
        <van-empty description="啊噢，走丢了~~" />
      </mt-tab-container-item>
    </mt-tab-container>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      navactive: "1",
      selected: "home",
      h: "211px",
      busy: false, // 开局时，运行（用于控制无线滚动是否使用）
      page: 1 //当前页码
    };
  },
  methods: {
    // 初始化轮播图
    initSwipe() {
      let picWidth = 1100; //图片宽度
      let picHeight = 620; //图片高度
      let screenWidth = window.screen.width; //屏幕的宽度
      let swipeHeight = Math.floor(picHeight * screenWidth / picWidth) + "px"; //（图片的高*屏幕的宽）除以图片的宽，向下取整
      this.h = swipeHeight;
    },
    onClickLeft() {
       this.$router.back(-1);
    }
  },
  watch: {
    selected(newval, oldval) {
      if (newval == "order") {
        this.$router.push("/order");
      } else if (newval == "productList") {
        this.$router.push("/productList1");
      } else {
        this.$router.push("/my");
      }
    }
  },
  //页面挂载完成后，根据屏幕的宽度，计算图片的高度
  mounted() {
    this.initSwipe();
  }
};
</script>

<style lang="scss" scoped>
.giftcard {
  .giftcard-lb {
    margin-top: 3px;
    .swipe img {
      width: 100%;
    }
  }
}
</style>